<script setup>
import useChannel from '@/store/channel'
import { transformTimeStamp, textHandle } from '@/utils/dialog-utils'
import useEventBus from '@/use/use-event-bus.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  message: {
    type: Object,
    default: () => ({}),
  },
})

const channelStore = useChannel()
const emit = defineEmits(['submit', 'reseCollectMsgList', 'removeColMsg'])
const eventBus = useEventBus()

defineExpose({
  open,
})
const visible = ref(false)
const msg = ref()
const timeStamp = ref()
const textContent = ref()
const createUser = ref()
const userId = ref()

watch(
  () => props.message,
  (v) => {
    if (v) {
      nextTick(() => {
        msg.value = v
        timeStamp.value = transformTimeStamp(v.createTime)
        createUser.value = v.createUser
        userId.value = v.userId
        textContent.value = v?.message?.content?.split(/\n/)
      })
    }
  }
)

function retransmission() {
  emit('reseCollectMsgList', msg.value.message.id)
}

function remove() {
  ElMessageBox.confirm(`从收藏中移除？`, '从收藏中移除？', {
    confirmButtonText: '移除',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      emit('removeColMsg', msg.value.id)
      visible.value = false
    })
    .catch(() => {})
}

function open() {
  visible.value = true
}

function close() {
  visible.value = false
}
</script>

<template>
  <TaskChatDialog v-model="visible" title="详情" width="720" @close="close" append-to-body>
    <div class="collect-detail">
      <div class="detail-info">
        <el-avatar
          :src="channelStore.memberAvatarMap.get(userId)"
          :size="30"
          @click="eventBus.emit('openPostcard', userId)">
          {{ createUser?.slice(-2) }}
        </el-avatar>
        <div class="header">
          <div class="user-name">{{ createUser }}</div>
          <div class="time-stamp">{{ timeStamp }}</div>
        </div>
      </div>
      <div class="detail-content">
        <div
          class="collect-detail-text"
          v-html="textHandle(item, index, props.options)"
          v-for="(item, index) in textContent"
          :key="index"></div>
      </div>
    </div>
    <div class="detail-control">
      <el-tooltip content="转发" :hide-after="0" placement="top">
        <SvgIcon name="msg-forward" size="12" style="cursor: pointer" @click.stop="retransmission"></SvgIcon>
      </el-tooltip>
      <el-tooltip content="移除" :hide-after="0" placement="top">
        <SvgIcon name="msg-remove" size="12" style="cursor: pointer" @click.stop="remove"></SvgIcon>
      </el-tooltip>
    </div>
  </TaskChatDialog>
</template>

<style scoped lang="scss">
.collect-detail {
  width: 100%;
  max-height: 80%;
  overflow: auto;
  .detail-info {
    @include use-flex(center);
    .header {
      margin-left: 20px;
      .time-stamp {
        font-size: 12px;
        color: #848791;
      }
    }
  }
  .detail-content {
    margin: 25px 0 10px;
    .collect-detail-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      white-space: normal;
      max-width: 100%;
    }
  }
  .collect-detail-date {
    margin-top: 20px;
    font-size: 12px;
  }
}
.detail-control {
  position: absolute;
  top: 30px;
  right: 50px;
  .svg-icon {
    margin-left: 15px;
  }
}
</style>
